Nessa aula, abordamos a integração da tipografia no nosso Design System, um passo crucial para garantir que o time receba todas as decisões tipográficas junto com os componentes e outros elementos definidos na biblioteca. Estamos em um momento de transição no Figma dos Estilos para Variáveis, e discutimos os usos para cada um e o que podemos esperar do futuro do Figma em relação às propriedades de tipografia nas variáveis.
Pontos importantes destacados na aula:
- Transição de Estilos para Variáveis: Estamos em um período de mudança onde o Figma planeja incorporar propriedades de texto em variáveis, mas ainda não está claro como isso funcionará.
- Atualizações do Figma: O Figma lançou recentemente seis novas atualizações para variáveis, incluindo layout, grid, borda e propriedades de corner radius.
- Futuro dos Estilos de Tipografia: Discutimos como o Figma está dividindo o trabalho com estilos e variáveis. Onde os estilos são agrupamentos de diversos valores, enquanto as variáveis são para valores únicos. No futuro, espera-se que possamos incorporar valores das propriedades tipográficas nas variáveis do Figma também.
- Fontes Variáveis: Exploramos o conceito de fontes variáveis, que permitem a transição de estilos tipográficos (como de serifada para não serifada, entre outros) através de valores ajustáveis.
- Implementação de Estilos e Variáveis: Atualmente, devemos continuar usando estilos e, quando o Figma permitir, substituiremos os valores específicos por variáveis.
- Referências de Estilos Tipográficos: Analisamos os estilos tipográficos do iOS (Human Interface Guidelines da Apple) e comparamos com as abordagens mais otimizadas do Google (Material Design 3) e da Uber (Base Design System).
- Convenção de Nomes para Tipografia: Decidimos adotar uma estrutura simplificada para nosso Design System, consistindo em Display, Heading, Label e Paragraph, para atender às nossas necessidades do nosso DS de forma otimizada.
- Aplicação dos Estilos: Discutimos como cada estilo tipográfico é aplicado dentro do Design System, desde textos chamativos (Display) até textos de corpo (Paragraph).
Ao final da aula, os alunos devem ter uma compreensão clara de como a tipografia é incorporada em um Design System, a importância de manter uma estrutura otimizada e como se preparar para as futuras atualizações do Figma que afetarão a maneira como trabalhamos com tipografia e fontes variáveis.
Sites mencionados na aula: